<h4>{{title}}</h4>
<form #f="ngForm" novalidate (ngSubmit)="onSubmit(f)">
  <!-- 表单验证的几种方式 -->
  <!-- 方式一：f.controls.name?.errors -->
  <!-- <div class="form-group">
    <label>名字</label>
    <input type="text" class="form-control" name="name" [(ngModel)]="user.name" required>
  </div>
  <div class="error" *ngIf="f.controls.name?.errors">名字是必须的</div> -->

  <!-- 方式二: #userName="ngModel" -->
  <div class="form-group">
    <label>名字</label>
    <input type="text" class="form-control" name="name" [(ngModel)]="user.name" #userName="ngModel" required>
  </div>
    <!-- 为了避免一开始就显示异常信息:  userName.touched-->
  <div class="error" *ngIf="userName.errors?.required && userName.touched">名字是必须的</div>

  <div class="form-group">
    <label>年龄</label>
    <input type="number" class="form-control" name="age" [(ngModel)]="user.age">
  </div>
  <div class="form-group">
    <label for="">性别</label>
    <label for="" *ngFor="let gender of genders;">
      <input type="radio" name="gender" [(ngModel)]="user.gender" [value]="gender.value">
      {{gender.display}}
    </label>
  </div>
  <div class="form-group">
    <label>角色</label>
    <select name="role" class="form-control" [(ngModel)]="user.role">
      <!-- tips: 用[value] 取代[ngModel],  ngModel会报错; -->
        <option *ngFor="let role of roles" [value]="role.value">{{role.display}}</option>
        <!-- <option *ngFor="let role of roles" [ngModel]="role.value">{{role.display}}</option> -->
      </select>
  </div>
  <div class="form-group">
    <label for="">主题</label>
    <select name="theme" class="form-control" [(ngModel)]="user.theme">
      <!-- ngValue & value: 在select组件中,对于option选项，每一项的绑定值,简单值时可以绑定到value,值为对象时可以绑定到ngValue -->
      <option *ngFor="let theme of themes" [ngValue]="theme">
        {{theme.display}}
      </option>
    </select>
  </div>
  <div class="form-group">
    <div class="checkbox">
      <label for="">
        <input type="checkbox" name="isActive" [(ngModel)]="user.isActive">
        是否激活
      </label>
    </div>
  </div>
  <div class="form-group">
    <label for="">话题</label>
    <select name="topics" multiple class="form-control" [(ngModel)]="user.topics">
      <option *ngFor="let topic of topics" [value]="topic.value">{{topic.display}}</option>
    </select>
  </div>
  <div class="form-group">
    <label for="">爱好</label>
    <span *ngFor="let hobby of hobbies">
      <input type="checkbox" name="hobby" [value]="hobby.value" [checked]="user.hobbies[hobby.value]" (change)="changeHobby(hobby, $event)">
      {{hobby.display}}
    </span>
  </div>
  <div class="form-group">
    <label for="">地址</label>
    <select name="province"class="form-control" [(ngModel)]="user.province"
      (change)="changeProvince($event.target.value)">
      <option *ngFor="let province of provinces" [value]="province.pk">{{province.pv}}</option>
    </select>
    <select name="city" class="form-control" [(ngModel)]="user.city">
      <option *ngFor="let city of cities" [value]="city.ck">{{city.cv}}</option>
    </select>
  </div>
  <button type="submit" (click)="save()" class="btn btn-default">保存</button>
  <!-- <button type="submit" [disabled]="f.invalid" (click)="save()" class="btn btn-default">保存</button> -->
</form>
